<!DOCTYPE html>
<html class="x-admin-sm" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>用户管理</title>
    <th:block th:include="include::header"/>
    <script th:src="@{/js/moment.js}"></script>
</head>
<body>
<div th:include="include::test1"></div>

<div class="x-nav">
          <span class="layui-breadcrumb">
            <a href="">首页</a>
            <a href="">演示</a>
            <a>
              <cite>导航元素</cite></a>
          </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"
       onclick="location.reload()" title="刷新">
        <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i></a>
</div>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-body ">
                    <form class="layui-form layui-col-space5">
                        <div class="layui-inline layui-show-xs-block">
                            <input type="text" name="username" placeholder="请输入用户名" autocomplete="off"
                                   class="layui-input">
                        </div>
                        <div class="layui-inline layui-show-xs-block">
                            <input type="text" name="nickname" placeholder="请输入昵称" autocomplete="off"
                                   class="layui-input">
                        </div>
                        <div class="layui-inline layui-show-xs-block">
                            <button class="layui-btn" lay-submit="" lay-filter="search"><i
                                    class="layui-icon">&#xe615;</i></button>
                        </div>
                    </form>
                </div>
                <div class="layui-card-header">
                    <button class="layui-btn layui-btn-danger" onclick="delAll()"><i class="layui-icon"></i>批量删除
                    </button>
                    <button class="layui-btn" onclick="xadmin.open('添加用户','./admin-add.html',600,400)"><i
                            class="layui-icon"></i>添加
                    </button>
                </div>
                <div class="layui-card-body ">
                    <table id="list"></table>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script th:inline="javascript">
    layui.use(['table','form'], function () {
        var table = layui.table;
        var form = layui.form;

        var listTable = table.render({
            elem: '#list',
            url: ctx + '/user/page',
            where: {
            },
            page: true,
            cols: [[ //表头
                {field: 'id', title: 'id', width: 80,},
                {field: 'username', title: '用户名'},
                {field: 'nickname', title: '昵称'},
                {field: 'age', title: '年龄'},
                {field: 'birthday', title: '生日'},
                // {
                //     field: 'birthday', title: '生日', templet(d) {
                //         // 前端格式化
                //         return moment(new Date(d.birthday)).format("YYYY-MM-DD")
                //     }
                // },
                {field: 'schoolName', title: '学校名称'},
                {
                    title: '操作', templet(data) {
                        var editUrl = ctx + "/user/edit";
                        // ``中可以通过${}获取js变量
                        return `
                         <a title="编辑" onclick="xadmin.open('编辑','${editUrl}')" href="javascript:;">
                                    <i class="layui-icon">&#xe642;</i>
                                </a>
                                <a title="删除" onclick="del(this,${data.id})" href="javascript:;">
                                    <i class="layui-icon">&#xe640;</i>
                                </a>
                    `
                    }
                },
            ]],
            request: {
                pageName: 'pageNum',
                limitName: 'pageSize'
            },
            parseData(res) {
                return {
                    "code": res.code == 200 ? 0 : res.code, //解析接口状态
                    "msg": res.msg, //解析提示文本
                    "count": res.data.total, //解析数据长度
                    "data": res.data.list //解析数据列表
                }
            }
        });

        form.on('submit(search)', function (data) {
            listTable.config.where.username = data.field.username;
            listTable.config.where.nickname = data.field.nickname;
            listTable.reload();
            return false;
        });

    });

    /*用户-删除*/
    function del(obj, id) {
        console.log(id)
        /*<![CDATA[*/
        var delUrl = /*[[@{/user/}]]*/ +''
        /*]]>*/
        delUrl += id;
        layer.confirm('确认要删除吗？', function (index) {
            $.ajax({
                url: delUrl,
                type: 'delete',
                success(res) {
                    if (res.success) {
                        layer.msg('已删除!', {icon: 1, time: 1000}, function () {
                            location.reload()
                        });
                    } else {
                        layer.msg('res.msg');
                    }
                }
            })
        });
    }


    function delAll(argument) {

        var data = tableCheck.getData();

        layer.confirm('确认要删除吗？' + data, function (index) {
            //捉到所有被选中的，发异步进行删除
            layer.msg('删除成功', {icon: 1});
            $(".layui-form-checked").not('.header').parents('tr').remove();
        });
    }
</script>
</html>